import { Component, OnInit, AfterContentInit, ElementRef } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { HttpService } from './../../../../http/http.service';
import { fromEvent, from, of } from 'rxjs';
import { map, switchMap, filter, pluck, zip } from 'rxjs/operators';

export interface IProoduct {
    id: string;
    name: string;
    imgUrl: string;
    summer: string;
    price: number;
}

export interface IMenuItem {

    icon: string;
    title: string;
    num: number;
    type: string;
    products: Array<IProoduct>;

}

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: [ './menu.component.less' ]
})
export class MenuComponent implements OnInit, AfterContentInit {
  private _menuList: Array<any> = [] as Array<any>;
  menuList: Array<IMenuItem>;
  currentMenu: IMenuItem = {} as IMenuItem;
  currentScrollTop = 0;
  menuHeaderH = 0;
  constructor(
    private activeRoute: ActivatedRoute,
    private http: HttpService,
    private el: ElementRef) { }
  ngOnInit() {
    this.init();
  }

  ngAfterContentInit() {
    this.getHeaderH();
  }
  init() {
    // 菜单列表
    const _this = this;
    const queryParams$ = this.activeRoute.queryParams;
    this.http.getMenuList().pipe(
      zip(queryParams$.pipe(pluck('type'))),
    ).subscribe( data => {
        // 配置初始数据
        _this.menuList = (data[0]) as Array<IMenuItem>;
        _this.currentMenu = _this.menuList.filter( item => item.type === data[1])[0];
    });
    this.bindScroll();
  }

  // 折叠菜单跳转
  goto({data, index}) {
    this.scrollTo(this._menuList[index].start);
    this.currentMenu = data;
    this.hiddenMenu(true);
  }

  // 获取页头高度
  getHeaderH () {
    this.menuHeaderH = this.el.nativeElement.querySelector('.menu-header').offsetHeight;
  }

  // 监听滚动事件
  bindScroll() {
    const _this = this;

    // 滚动容器
    const appContentEle = document.body.querySelector('.app-content');
    // 计算当前滚动条是否进入分类区间
    const _menuList$ = from(_this._menuList);

    // 区间判断
    const hasInterval = (data) => (item) => item.start <= data && item.end > data;

    // 当前文档scrollTop值
    const getScrollTop = () => appContentEle.scrollTop + _this.menuHeaderH;

    fromEvent(appContentEle, 'scroll').pipe(
      map(getScrollTop),
      switchMap(data => _menuList$.pipe(
        filter( hasInterval(data) ),
        pluck('sign'),
      ))
    ).subscribe(data => {
      _this.currentMenu = data;
    });
  }

  // 显示折叠菜单
  hiddenMenu =  (state: boolean) => {};

  // 获取分类scrollTop
  getScrollTop(data) {
    // 初始化列表位置
    if (data.sign.type === this.currentMenu.type) {
      this.scrollTo(data.start);
    }
    this._menuList.push(data);
  }

  // 获取弹窗控制函数，并缓存
  popupSwitch(fn) {
    this.hiddenMenu = (state: boolean) => fn(state);
  }

  // 设置滚动条位置
  scrollTo(position) {
    const appContentEle = document.body.querySelector('.app-content');
    appContentEle.scrollTo(0, position - this.menuHeaderH);
  }

  // 设置文档位置
  // scrollTo(current = 0, target = 0) {
  //   setTimeout(() => {
  //     if (current < target) {
  //       window.scrollTo(0, current);
  //       this.scrollTo(current + 10, target);
  //     } else {
  //       this.currentScrollTop = target;
  //     }
  //   }, 10 );
  // }
}
